<!--
 * @Author: zeng_dq
 * @Date: 2021-07-29
 * @Description: 首页
 -->
<template>
  <div class="home-container">
    <div class="page-img" />
    <div class="page-version-info">
      <div class="wrap12">
        <span class="txt5">凤翎基础开发平台</span>
        <div class="address">
          <div>
            <div class="section4" />
            <span class="word7">官网地址</span>
            <a class="txt6" href="https://fawkes.cybereng.com" target="_blank"
              >https://fawkes.cybereng.com</a
            >
          </div>
          <div>
            <div class="section4" />
            <span class="word7">文档地址</span>
            <a
              class="txt6"
              href="https://fawkes.cybereng.com/doc"
              target="_blank"
              >https://fawkes.cybereng.com/doc</a
            >
          </div>
        </div>
      </div>

      <div class="wrap13">
        <span class="txt5">当前版本信息</span>
        <div class="info">
          <img src="https://flat.badgen.net/badge/Vue/2.6.10/green" />
          <img src="https://flat.badgen.net/badge/fawkes-lib/0.3.0/green" />
          <img
            src="https://flat.badgen.net/badge/Springcloud/Hoxton.SR12/cyan"
          />
          <img
            src="https://flat.badgen.net/badge/Springboot/2.3.12.RELEASE/cyan"
          />
          <img
            src="https://flat.badgen.net/badge/SpringSecurityOauth2/2.3.5/blue"
          />
          <img
            src="https://flat.badgen.net/badge/FawkesBom/2.0.0.RELEASE/blue"
          />
          <img src="https://flat.badgen.net/badge/Copyright/Fawkes/orange" />
          <img
            src="https://flat.badgen.net/badge/Version/2.0.0.RELEASE/orange"
          />
        </div>
      </div>
    </div>

    <div class="page-version-history">
      <div v-if="logs.next" class="history-content">
        <div
          class="version-info"
          @click="logs.next.collapse = !logs.next.collapse"
        >
          <img class="next-img" src="@/assets/img/home/next-circle.png" />
          <div class="history-version-number">
            <span class="version-number">{{ logs.next.version }}</span>
          </div>
          <div class="box-current">
            <span class="word16">{{ logs.next.date }}</span>
          </div>
          <i
            class="fks-icon-arrow-right positive-content-rotate"
            :style="logs.next.collapse ? 'transform: rotate(90deg);' : ''"
          />
        </div>
        <fks-row
          class="box-content"
          :gutter="32"
          :style="logs.next.collapse ? 'max-height: 2000px' : 'max-height: 0'"
        >
          <fks-col :sm="24" :md="12" :lg="8">
            <div class="line-one">
              <div class="section11" />
              <span class="info13">新特性</span>
              <span
                v-for="(item, index) in logs.next.plan.feat"
                :key="item"
                class="word17"
              >
                {{ index + 1 }}. {{ item }}
              </span>
            </div>
          </fks-col>
          <fks-col v-if="!!logs.next.plan.perf" :sm="24" :md="12" :lg="8">
            <div class="line-one">
              <div class="section12" />
              <span class="info13">升级</span>
              <span
                v-for="(item, index) in logs.next.plan.perf"
                :key="item"
                class="word17"
              >
                {{ index + 1 }}. {{ item }}
              </span>
            </div>
          </fks-col>
        </fks-row>
      </div>

      <div
        v-for="(history, i) in logs.history"
        :key="history.version"
        class="history-content"
      >
        <div class="version-info" @click="history.collapse = !history.collapse">
          <div
            :class="
              i == 0 ? 'current-checked-version' : 'history-version-section'
            "
          />
          <div class="history-version-number">
            <span class="version-number" :class="{ 'current-word': i == 0 }">{{
              history.version
            }}</span>
          </div>
          <div class="box-current">
            <span class="word16">{{ history.date }}</span>
          </div>
          <i
            class="fks-icon-arrow-right positive-content-rotate"
            :style="history.collapse ? 'transform: rotate(90deg);' : ''"
          />
        </div>
        <fks-row
          class="box-content"
          :gutter="32"
          :style="history.collapse ? 'max-height: 2000px' : 'max-height: 0'"
        >
          <fks-col :sm="24" :md="12" :lg="8">
            <div class="line-one">
              <div class="section11" />
              <span class="info13">新增</span>
              <span
                v-for="(item, index) in history.log.feat"
                :key="item"
                class="word17"
              >
                {{ index + 1 }}. {{ item }}
              </span>
            </div>
          </fks-col>
          <fks-col v-if="history.log.perf" :sm="24" :md="12" :lg="8">
            <div class="line-one">
              <div class="section12" />
              <span class="info13">优化</span>
              <span
                v-for="(item, index) in history.log.perf"
                :key="item"
                class="word17"
              >
                {{ index + 1 }}. {{ item }}
              </span>
            </div>
          </fks-col>
          <fks-col v-if="history.log.fix" :sm="24" :md="12" :lg="8">
            <div class="line-one">
              <div class="section13" />
              <span class="info13">修复</span>
              <span
                v-for="(item, index) in history.log.fix"
                :key="item"
                class="word17"
              >
                {{ index + 1 }}. {{ item }}
              </span>
            </div>
          </fks-col>
        </fks-row>
      </div>
    </div>
  </div>
</template>
 
<script>
import Mix from '@/mixins/module.js'
import logs from './logs'

export default {
  name: 'HomePage',
  mixins: [Mix],
  data() {
    return {
      logs
    }
  },
  watch: {},
  methods: {}
}
</script>
 
 <style lang="scss" scss scoped>
.home-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f1f2f6 !important;

  .page-img {
    width: 100%;
    height: 164px;
    margin-bottom: 16px;
    background: url('../../assets/img/home/banner.svg') no-repeat;
    background-position: 50%;
    background-size: cover;
  }

  .page-version-info {
    width: 100%;
    padding: 32px 16px 40px 32px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
  }

  .txt5 {
    display: inline-block;
    width: 200px;
    font-weight: 600;
    font-size: 18px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    overflow-wrap: break-word;
    color: #191919;
  }

  .wrap12 {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-bottom: 32px;
    overflow: hidden;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    .address {
      display: flex;
      flex-wrap: wrap;
      width: auto;
      > div {
        margin-right: 20px;
      }
    }
    .section4 {
      display: inline-block;
      width: 6px;
      height: 6px;
      border: 1px solid #191919;
      border-width: 1px;
      border-radius: 50%;
      vertical-align: middle;

      &:nth-child(5) {
        margin-left: 56px;
      }
    }

    .word7 {
      display: inline-block;
      margin-left: 16px;
      font-size: 14px;
      font-family: MicrosoftYaHei, sans-serif;
      text-align: left;
      white-space: nowrap;
      overflow-wrap: break-word;
      color: #191919;
    }

    .txt6 {
      display: inline-block;
      margin-left: 12px;
      font-size: 14px;
      font-family: MicrosoftYaHei, sans-serif;
      text-align: left;
      white-space: nowrap;
      overflow-wrap: break-word;
      color: rgba(0, 145, 255, 1);
    }

    .info5 {
      display: inline-block;
      width: 56px;
      margin: 5px 0 0 12px;
      font-size: 14px;
      font-family: MicrosoftYaHei, sans-serif;
      line-height: 19px;
      text-align: left;
      white-space: nowrap;
      overflow-wrap: break-word;
      color: #191919;
    }

    .word10 {
      display: inline-block;
      width: 188px;
      margin: 5px 0 0 11px;
      font-size: 14px;
      font-family: MicrosoftYaHei, sans-serif;
      line-height: 19px;
      text-align: left;
      white-space: nowrap;
      overflow-wrap: break-word;
      color: rgba(0, 145, 255, 1);
    }
  }

  .wrap13 {
    width: 100%;
    height: auto;
    font-size: 0;
    line-height: 25px;

    .info {
      display: inline-block;
      width: calc(100% - 200px);
      font-size: 0;

      img {
        margin-right: 16px;
        vertical-align: middle;
      }
    }
  }

  .page-version-history {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: calc(100% - 350px);
    padding: 32px;
    margin-top: 16px;
    background: #fff;

    .history-content {
      position: relative;
      width: 100%;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        z-index: 10;
        top: 0;
        bottom: 0;
        left: 10px;
        width: 1px;
        height: 100%;
        background: #edeff3;
      }
    }

    .history-content:first-child::before {
      top: 16px;
    }

    .history-content:last-child::before {
      height: 16px;
    }
  }

  .positive-content-rotate {
    display: inline-block;
    margin-left: 24px;
    transition: transform 0.25s;
  }

  .version-number {
    font-size: 18px;
    font-family: DIN-Medium, DIN, sans-serif;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: break-word;
    color: rgba(99, 104, 125, 1);
  }

  .history-version-number {
    display: inline-block;
    margin-left: 40px;
    font-size: 18px;
    font-family: DIN-Medium, DIN, sans-serif;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: break-word;
    color: rgba(99, 104, 125, 1);
  }

  .word16 {
    width: 72px;
    font-size: 14px;
    font-family: DIN-Medium, DIN, sans-serif;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: break-word;
    color: rgba(166, 168, 171, 1);
    // margin-top: 1px;
  }

  .next-img {
    position: absolute;
    z-index: 100;
    top: 16px;
    left: 2px;
    display: inline-block;
    width: 16px;
    height: 16px;
  }

  .version-info {
    position: relative;
    z-index: 100;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
  }

  .section11 {
    z-index: 148;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    margin-bottom: 2px;
    border: 1px solid rgba(224, 32, 56, 1);
    border-width: 1px;
    border-radius: 50%;
    background-color: rgba(224, 32, 56, 0.58);
  }

  .section12 {
    z-index: 148;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    margin-bottom: 2px;
    border: 1px solid #49b1ff;
    border-width: 1px;
    border-radius: 50%;
    background-color: rgba(0, 145, 255, 0.27);
  }

  .section13 {
    z-index: 148;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    margin-bottom: 2px;
    border: 1px solid rgba(62, 198, 128, 1);
    border-width: 1px;
    border-radius: 50%;
    background-color: rgba(0, 180, 87, 0.4);
  }

  .info13 {
    z-index: 142;
    width: 28px;
    margin-left: 8px;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
  }

  .word17 {
    display: block;
    margin-top: 12px;
    line-height: 25px;
    text-align: left;
    overflow-wrap: break-word;
    color: rgba(85, 85, 85, 1);
  }

  .current-word {
    font-size: 20px;
    font-family: DIN-Bold, DIN, sans-serif;
    white-space: nowrap;
    overflow-wrap: break-word;
    color: rgba(2, 122, 255, 1);
  }

  .line-one {
    position: relative;
    display: block;
    height: calc(100% - 32px);
    min-height: 250px;
    padding: 16px;
    margin: 20px 0;
    border: 1px solid rgba(223, 226, 233, 0.84);
    border-width: 1px;
    box-shadow: 0 2px 8px 0 rgba(196, 198, 205, 0.17);
  }

  .box-content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    margin-left: 16px !important;
    overflow: hidden;
    font-size: 14px;
    transition: max-height 0.5s;
    transition-timing-function: ease;

    .box-content::after {
      content: '';
      clear: both;
      display: block;
    }
  }

  .history-version-section {
    position: absolute;
    z-index: 100;
    top: 16px;
    left: 2px;
    width: 16px;
    height: 16px;
    border: 2px solid #027aff;
    border-radius: 50%;
    background-color: white;
  }

  .current-checked-version {
    position: absolute;
    z-index: 100;
    top: 15px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #027aff;
    box-shadow: 0 0 5px #8cafe2;
  }

  .current-checked-version::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 5px;
    width: 48%;
    height: 30%;
    border: 3px solid rgb(255, 255, 255);
    border-top: none;
    border-radius: 1px;
    background: transparent;
    transform: rotate(-40deg);
    border-right: none;
  }

  .box-current {
    z-index: 100;
    display: inline-block;
    width: 90px;
    height: 25px;
    margin-left: 16px;
    border-radius: 2px;
    line-height: 25px;
    text-align: center;
    background: #f2f4f5;
  }
}
</style>